<template>
  <el-scrollbar>
    <el-menu
      :unique-opened="false"
      :default-active="$route.path"
      :background-color="themeStore.menuBgColor"
      :text-color="themeStore.menuTextColor"
      :collapse="systemStore.isPc && systemStore.isCollapse"
      router
      @select="select"
    >
      <menu-item
        v-for="menu in menus"
        :key="menu.path"
        :menu="menu"
      />
    </el-menu>
  </el-scrollbar>
</template>

<script setup>
import MenuItem from './MenuItem.vue'
import useThemeStore from '@/store/theme'
import useSystemStore from '@/store/system'
import { cloneDeep } from 'lodash-es'

const themeStore = useThemeStore()
const systemStore = useSystemStore()

// 过滤掉所有的路由
const menus = filterTreeByType(cloneDeep(systemStore.menus), 3)

function filterTreeByType (tree, type) {
  return tree.filter(node => {
    if (node.type === type) {
      return false
    } else if (node.children && node.children.length > 0) {
      node.children = filterTreeByType(node.children, type)
      return true
    } else {
      return true
    }
  })
}

// 手机屏下点击菜单关闭抽屉
const props = defineProps({
  drawer: {
    type: Boolean,
    default: false
  }
})

const select = () => {
  if (!props.drawer) return
  systemStore.isCollapse = false
}
</script>

<style scoped lang='scss'>
.el-menu {
  border-right: none;
  height: 100vh;
}

.el-menu:not(.el-menu--collapse) {
  width: 200px;
}

::-webkit-scrollbar {
  display: none;
}
</style>
